<template>
  <FormItem label="规格" name="packageId" v-if="appId">
    <RadioGroup class="w-400px" v-bind="$attrs" v-model:value="packageId" @change="handleChange">
      <template v-for="instance in packageOptions" :key="`${instance.id}`">
        <Radio :value="instance.id" class="radio-class">
          <Card size="small" :title="instance.type" :canExpan="false" class="card-class">
            <div>
              <span v-show="!instance.isExpand">不支持扩容</span>
              <span v-show="instance.isExpand">支持扩容</span>
              <br />
              <template v-if="instance.ifSupportLicenseMgmt === true">
                <span>支持License管理</span>
                <br />
              </template>
              <template v-if="instance.ifSupportFileSystem === true">
                <span>支持文件系统</span>
                <br />
              </template>
              <span v-show="instance.dbMultiTenantMode === 'COLUMN'">数据隔离级别低：共享数据库，共享schema</span>
              <span v-show="instance.dbMultiTenantMode === 'SCHEMA'">数据隔离级别中：独立数据库，独立schema</span>
              <span v-show="instance.dbMultiTenantMode === 'DATASOURCE'">数据隔离级别高：独立数据源</span>
              <br />
              <span v-show="instance.appMultiTenantMode === 'SHARED'">应用隔离级别低：命名空间共享</span>
              <span v-show="instance.appMultiTenantMode === 'NAMESPACE'">应用隔离级别中：命名空间隔离</span>
            </div>
          </Card>
        </Radio>
      </template>
    </RadioGroup>
  </FormItem>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Radio, Card, RadioGroup, FormItem } from 'ant-design-vue';
import { getInstanceTypes } from '/@/api/system-mgmt/instance-mgmt/instance';
import { InstanceListItem } from '/@/api/system-mgmt/instance-mgmt/model/instanceModel';

const packageId = ref();
const appId = ref();
const packageOptions = ref<InstanceListItem[]>([]);
const getPackageOpt = async (app: string, tenantCode: string) => {
  appId.value = app;

  packageOptions.value = await getInstanceTypes({ appId: appId.value, tenantCode });
};
let selectedInstance = ref();
const emit = defineEmits(['useFile', 'getTenantType']);
const getInstance = () => {
  packageOptions.value.forEach((item) => {
    if (item.id == packageId.value) {
      if (item.type == '基础版') {
        item.packageType = 'basic';
      } else if (item.type == '专业版') {
        item.packageType = 'professional';
      } else if (item.type == '尊享版') {
        item.packageType = 'premium';
      }
      selectedInstance.value = item;
      if (selectedInstance.value.ifSupportFileSystem == true) {
        emit('useFile');
      }
    }
  });
};
const tenantType = ref();
const getTenantType = () => {
  tenantType.value = selectedInstance.value.tenantType;
};

const handleChange = () => {
  getInstance();
  getTenantType();
  emit('getTenantType', tenantType.value);
};
defineExpose({ getPackageOpt, selectedInstance });
</script>

<style lang="less" scoped>
.radio-class {
  display: inline-block;
  margin-top: 10px;
}
.card-class {
  display: inline-block;
  vertical-align: text-top;
  width: 300px;
  height: 100%;
  margin: 0px;
}
</style>
